<template>
	<view>
		<view v-if="iconStatus" class="position-fixed right-0 pr-1" style="top: 50vh;z-index: 99999;" @click="event">
			<image :class="[animationStatus == 1?'animation1':(animationStatus == 2?'animation2':'')]" :src="imgUrl" mode="widthFix" style="width: 100rpx;"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			// 动画元素的图片地址
			imgUrl:{
				type:String,
				default:''
			},
			// 是否显示动画图片
			iconStatus:{
					type:Boolean,
					default:true
			},
			//使用何种动画
			animationStatus:{
				type:Number,
				default:1
			}
			
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 点击显示
			event(){
				this.$emit('event')
			},
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import '@/common/free.css';
	@import '@/common/common.css';
	@import '@/common/comicon.css';
	@import '@/common/free-icons.css';
	/* 闹铃动画 */
	.animation1{ 
				 /* 动画名称  持续时间 运动曲线 播放次数 */
		animation:  ring 2000ms ease infinite;
	}
	/* 上下浮动动画 */
	.animation2{
				 /* 动画名称  持续时间 运动曲线 播放次数 */
		animation: tbfloat 3s ease-in-out infinite alternate both;
	}
	/* 转出-向右上 */
	.animation3{
				 /* 动画名称  持续时间 运动曲线 播放次数 */
		animation: rotateoutRT 1300ms ease infinite; 
	}
	@keyframes ring{
	    0%{transform:scale(1);}
	    10%,20%{transform:scale(0.9) rotate(-6deg);}
	    30%,50%,70%,90%{transform:scale(1.1) rotate(6deg);}
	    40%,60%,80%{transform:scale(1.1) rotate(-6deg);}
	    100%{transform:scale(1) rotate(0);}
	}
	@keyframes tbfloat {
		0% {
			-webkit-transform: translateY(-10px);
			transform: translateY(-10px)
		}
		to {
			-webkit-transform: translateY(10px);
			transform: translateY(10px)
		}
	}
	@keyframes rotateoutRT{
	   0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
	   100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
	}
</style>
